import React, { useState,useRef } from 'react'
import {v4 as uuidV4} from 'uuid'
import dayjs from 'dayjs';

let i = 1000;
const user = {
    id: 1,
    name: 'yuxl'

}
export default function Comment() {
    const input = useRef()
    const [command,setCommand] = useState('')
    const [commentList, setCommentList] = useState([{
        id: 1,
        uid:2,
        name: 'yuxl2',
        time: dayjs(Date.now()).format('YYYY-MM-DD HH:mm:ss'),
        content: 'hello world'
    }])
    const addComment = () => {
        setCommentList([...commentList, {
            id: uuidV4(),
            uid: user.id,
            name: user.name,
            time: dayjs(Date.now()).format('YYYY-MM-DD HH:mm:ss'),
            content: command
        }])
        setCommand('')
        input.current.focus()
    }
    const delComment = (id) => {
        setCommentList(commentList.filter(item => {
            return item.id !== id
        }))
    }
    return (
        <div>
            <h1>评论列表</h1>
            <ul>
                {commentList.map(item => <li key={item.id}>
                    <div>{item.name}:{item.content} [{item.time}]{item.uid === user.id && <button onClick={() => {delComment(item.id)}}>删除</button> }</div> 
                </li>)}
            </ul>
            <input type="text" ref={input} value={command} onChange={(e) => setCommand(e.target.value)}/><button onClick={addComment}>发表评论</button>
        </div>
    )
}
